<!--
 * @Author: your name
 * @Date: 2021-09-06 19:47:55
 * @LastEditTime: 2021-10-31 15:01:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-customer-cli\src\views\Product\product.vue
-->
<template>
  <div class="product">
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar title="服务产品" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <!-- 根据栏目查询对应的产品信息 -->
    <div class="productContent">
      <van-sidebar v-model="active">
        <van-sidebar-item
          @click="toFindProduct(item.id)"
          :title="item.name"
          v-for="(item,index) in categories"
          :key="index"
        />
      </van-sidebar>
      <div class="product">
        <van-card
          v-for="item in products"
          :key="item.id"
          :price="item.price"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
        >
          <template #footer>
            <van-stepper
              @change='toSubmit(item,$event)'
              :value='value'
              default-value='0'
              theme="round"
              button-size="22"
              disable-input
              min="0"
            />
          </template>
        </van-card>
      </div>
    </div>
    <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      // 侧边导航默认点击
      active: "0",
      // 首页跳转后传递的栏目id
      categoryId: "",
      // 步进器最小值
      value: 0
    };
  },
  created() {
    // this.findAllCategory();
    this.findAllCategory();
    this.active = this.$route.query.index;
    this.findAllProduct(this.$route.query.id);
    // console.log(this.$route.query.index)
  },
  methods: {
    
    // 提交订单
    onSubmit(){
      if(this.total==0){
        Toast.fail('请先下单')
      }else{
        //跳转到订单详情页
        this.$router.push({
          path:'orderConfirm'
        })
      }
    },
    // onSubmit(){
    //  if(this.total==0){
    //    Toast.fail('请提交订单')
    //  }else{
    //     this.$router.push({
    //     path:"orderConfirm"
    //   })
    //  }
    // },
    //将订单信息和订单数量传递给购物车
    toSubmit(product,value){
      // 打印了每条产品的数据  打印了步进器数值
      // price*number
      // product.price $event
      // console.log(product,value)
      // 每条产品订单项
      let orderline={
        //通过步进器生成的数据
        productName:product.name,
        id:product.id,
        number:value,
        price:product.price,
      }
      this.addShopCar(orderline)
      // let orderline={
      //   id:product.id,
      //   number:value,
      //   price:product.price,
      //   productName:product.name
      // }
      // this.addShopCar(orderline)
    },
    
    // toSubmit(product, value) {
    //   let orderline = {
    //     number: value,
    //     price: product.price,
    //     productId: product.id
    //   };
    //   this.addShopCar(orderline);
    // },
   
    toFindProduct(id) {
      this.findAllProduct(id);
    },
    // 返回上一页
    onClickLeft() {
      this.$store.getters.total = 0;
      this.$router.go(-1);
    },
    ...mapActions("category", ["findAllCategory"]),
    ...mapActions("product", ["findAllProduct"]),
    //购物车的方法映射到产品界面
    ...mapMutations('shopcart',['addShopCar'])
  },
  computed: {
    ...mapState("category", ["categories"]),
     ...mapState("product", ["products"]),
     //购物的金额映射到订单界面
    ...mapGetters('shopcart',['total']),
    // ...mapGetters("shopcart", ["total"])
  }
};
</script>

<style scoped>
/* 产品整体样式 */
.productContent {
  display: flex;
  height: calc(100vh - 100px);
}
.product {
  flex: 1;
  overflow:scroll;
}
.van-card {
  margin: 10px;
  height: 130px;
}
</style>